<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{formTitle}}</block>
		</cu-custom>
		<scroll-view scroll-x class="bg-white nav fixed" scroll-with-animation :scroll-left="scrollLeft" :style="'top:'+ccustomBar" v-if="Prokind.length > 1">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in Prokind" :key="index" @tap="tabSelect" :data-id="index">
					{{item.text}}
				</view>
			</view>
		</scroll-view>
		<view style="height: 90upx;" v-if="Prokind.length > 1"></view>
		<template v-for="(item,pindex) in Prokind">
			<block v-if="pindex==TabCur" :key="pindex">
				<view class="cu-form-group">
					<view class="title">日期</view>
					<picker mode="date" :value="formData.rukuDate" :data-index="index" start="2020-01-01" end="2050-01-01" @change="DateChange">
						<view class="picker">
							{{formData.rukuDate}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">来源</view>
					<input v-model="formData.reason" placeholder="来源"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">用途</view>
					<e7-autocomplete v-model="formData.purpose" clearable="true" :loadData="loadAutocompleteData" :fld="{dataKey:'purpose',placeholder:'用途'}"></e7-autocomplete>
				</view>
				<view class="cu-form-group">
					<view class="title">产品编号</view>
					<e7-autocomplete v-model="formData.code" clearable="true" :loadData="loadAutocompleteData" :fld="{dataKey:'codeList',placeholder:'产品编号'}" @selectItem="getRkInfo"></e7-autocomplete>
				</view>
				<view class="cu-form-group">
					<view class="title">产品名称</view>
					<input v-model="formData.proName" placeholder="产品名称" disabled="true"></input>
				</view>
				<block v-for="(item1,index) in item.fileds" :key="index">
					<view class="cu-form-group">
						<view class="title">{{item1.title}}</view>
						<input v-model="formData[item1.filed]" :placeholder="item1.title" clearable="true" disabled="true" @change="checkCode"></input>
					</view>
				</block>
				<view class="cu-form-group margin-top">
					<view class="title">花型颜色</view>
					<input v-model="formData.proDesc" placeholder="花型颜色" clearable="true" @change="checkCode"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">格型</view>
					<e7-autocomplete v-model="formData.gexing" clearable="true" :loadData="loadAutocompleteData" :fld="{dataKey:'gexingList',placeholder:'格型'}" @input="checkCode"></e7-autocomplete>
				</view>
				<e7-checkbox v-model="formData.hzlId" :fld="{showType:'default',options:hzlOptions}" title="后整理工艺" @input="checkCode"></e7-checkbox>
				<view class="cu-form-group margin-top">
					<view class="title">样品类型</view>
					<e7-autocomplete v-model="formData.type" clearable="true" :loadData="loadAutocompleteData" :fld="{dataKey:'typeList',placeholder:'样品类型'}" @input="checkCode"></e7-autocomplete>
				</view>
				<view class="cu-form-group">
					<view class="title">入库数量</view>
					<input v-model="formData.cnt" placeholder="入库数量"></input>
				</view>
				<picker-pop
					title="库位"
					url="/pages/component/list2pop?dataKey=kuweiList"
					:text="formData.kuweiName"
					@change="changeKuwei"
				>
				</picker-pop>
				<view class="cu-form-group margin-top">
					<view class="title">备注</view>
					<input v-model="formData.memo" placeholder="更多说明"></input>
				</view>
				<view class="margin-top"></view>
				<e7-comp type="e7-image" :value="value" title="样品图片" name="imageId" :fld="{limit:5}"></e7-comp>
			</block>
		</template>
		<view v-if="pageType!='detial'" class="uni-btn-v uni-common-mt uni-form-button padding-xl">
			<button class="btn-submit block bg-blue cu-btn lg" @tap="submitForm" formType="submit" :disabled="disabledSubmit" type="primary">
				<text v-if="disabledSubmit" class="cuIcon-loading2 cuIconfont-spin"></text> 提交
			</button>
		</view>
		<view class="cu-modal" :class="DialogModal2?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<span class="cuIcon-infofill text-orange"></span>该编号产品属性有改动,请确认产品档案操作方式?
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub solid-left" @tap="alterPro">修改</view>
					<view class="action margin-0 flex-sub text-green" @tap="addPro">新增</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import e7Comp from "@/components/e7-comp.vue";
	import e7Checkbox from "@/components/e7-checkbox.vue";
	import e7Autocomplete from "@/components/e7-autocomplete.vue";
	import formatData from '../../common/formData.js';
	import graceChecker from '../../common/graceChecker.js';
	import pickerPop from "@/components/picker-pop.vue"

	export default {
		components: {e7Comp,e7Checkbox,e7Autocomplete,pickerPop},
		data() {
			return {
				ccustomBar:(this.CustomBar+'px'),
				formData:{
					rukuDate:'',
					purpose:'',
					code:'',
					hzlId:[],
					gexing:'',
					type:'',
					kuweiId:'',
					kuweiName:'',
					productId:'',
					proCode:'',
				},
				//模态窗
				DialogModal2:false,
				//用来判断是新增还是修改
				modalStatus:'',
				Prokind:[],
				hzlOptions:[],
				TabCur: 0,
				scrollLeft: 0,
				formTitle:'新增入库',
				rules:[],
				disabledSubmit:false,
				pageKey:'',
				pageType:'',
				loadingPage:true,
				callback:{
					code:function(d){
						console.log({d});
					}
				}
			}
		},
		methods: {
			tabSelect(e) {
				let that = this;
				let change = false;
				var _promise = new Promise(function(resolve, reject){
					let _dialog = false;
					if(that.formData.code){
						_dialog = true;
					}
					if(_dialog){
						uni.showModal({
							title: '切换产品分类',
							content: "切换分类会导致当前输入内容丢失,请确认是否切换?",
							showCancel:true,
							success: function (res) {
								if (res.confirm) {
									change = true;
									resolve(res);
								} else if (res.cancel) {
									console.log('用户点击取消');
									reject({});
								}
							}
						});
					}else{
						resolve({});
						// if(!same){
						// 	resolve({});
						// }else{
						// 	reject({});
						// 	uni.showToast({title:'', icon:"none"});
						// }
					}
				});
				_promise.then((res)=>{
					if(change){
						that.TabCur = e.currentTarget.dataset.id;
						that.formData = {};
						that.formData.rukuDate = formatData.dateToday();
						that.getData(that.TabCur);
					}else{
						that.TabCur = e.currentTarget.dataset.id;
						that.getData(that.TabCur);
					}
				});
			},
			handleInput: function(v ,fld) {
				// console.log({v ,fld});
				if(fld.name=='code'){
					this.callback.code(v);
				}
			},
			changeKuwei(res){
				this.formData.kuweiId = res.data.id
			},
			checkCode(){
				//获取所有数据信息
				var params = {
					method:'sample.code.check',
					formData:JSON.stringify(this.formData)
				};
				formatData.set(params);
				uni.request({
					url: formatData.httpUrl(), 
					data:params,
					method:'POST',
					header: {
					  'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						let result = res.data.data;
						console.log({result});
						if(!result.success){
							if(result.msg){
								uni.showToast({icon:'none',title:result.msg,duration:1500});
							}
							this.formData.code = '';
						}
						
						//如果是无权限
						if(res.data.rsp == 'fail' && result.auth === false){
							setTimeout(function(){
								uni.reLaunch({
									url:"/pages/login/login"
								})
							},1000);
						}
					}
				});
			},
			alterPro(){
				this.modalStatus = 'alter';
				this.DialogModal2 = false;
				this.submitForm();
			},
			addPro(){
				this.modalStatus = 'add';
				this.formData.code = '';
				this.DialogModal2 = false;
				this.submitForm();
			},
			submitForm() {
				this.disabledSubmit = true;
				var that = this;
				console.log('表单数据，',this.formData);
				var params = {
					method:'sample.ruku.update',
					formData:JSON.stringify(that.formData),
					kindIndex:that.TabCur,
					proStatus:that.modalStatus,
				};
				formatData.set(params);
				uni.request({
					url: formatData.httpUrl(), //仅为示例，并非真实接口地址。
					data:params,
					method:'POST',
					header: {
					  'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						let that = this;
						var result = res.data.data;
						console.log('result，',res);
						var promise1 = new Promise(function(resolve, reject){
							if(res.data.success && res.data.dialogIsUpdate){
								that.DialogModal2 = true;
							}else{
								resolve({});
							}
						});
						promise1.then((res)=>{
							if(result.success){
								uni.showLoading({
									title: result.msg || '操作成功',
									mask:true,
								});
								setTimeout(function(){
									uni.hideLoading();
									uni.navigateBack({
										delta: 1
									});
								},500);
							}else{
								uni.showToast({title:result.msg||(res.data.res||'提交状态未知'), icon:"none"});
								that.disabledSubmit = false;
							}
						});
					},
					complete: (res) => {
						setTimeout(function(){
							that.disabledSubmit = false;
						},200)
					}
				});
			},
			getRkInfo(res){
				let that = this;
				//获取所有数据信息
				var params = {
					method:'sample.rkInfo.get',
					code:res
				};
				formatData.set(params);
				uni.request({
					url: formatData.httpUrl(), 
					data:params,
					method:'POST',
					header: {
					  'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						let result = res.data.data;
						console.log({result});
						if(result.msg){
							uni.showToast({icon:'none',title:result.msg,duration:1500});
						}
						//如果是无权限
						if(res.data.rsp == 'fail' && result.auth === false){
							setTimeout(function(){
								uni.reLaunch({
									url:"/pages/login/login"
								})
							},1000);
						}
						if(result.code){
							that.formData.proCode = result.Product.proCode;
							for(let i in that.Prokind[that.TabCur].fileds){
								that.formData[that.Prokind[that.TabCur].fileds[i].filed]= result.Product[that.Prokind[that.TabCur].fileds[i].filed];
							}
							that.formData.gexing  = result.gexing;
							that.formData.hzlId   = result.hzlId;
							that.formData.code    = result.code;
							that.formData.type    = result.type;
							that.formData.proDesc = result.proDesc;
						}else{
							that.formData.proCode = result.proCode;
							for(let i in that.Prokind[that.TabCur].fileds){
								that.formData[that.Prokind[that.TabCur].fileds[i].filed]= result[that.Prokind[that.TabCur].fileds[i].filed];
							}
						}
						that.formData.proName = result.proName;
						that.formData.productId   = result.productId;
					}
				});
			},
			getData(kindIndex){
				//获取所有数据信息
				var params = {
					method:'sample.option.get',
				};
				params['kindIndex'] = kindIndex ? kindIndex : 0;
				formatData.set(params);
				uni.request({
					url: formatData.httpUrl(), 
					data:params,
					method:'POST',
					header: {
					  'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						let result = res.data.data;
						// console.log({result});
						if(result.msg){
							uni.showToast({icon:'none',title:result.msg,duration:1500});
						}
						//如果是无权限
						if(res.data.rsp == 'fail' && result.auth === false){
							setTimeout(function(){
								uni.reLaunch({
									url:"/pages/login/login"
								})
							},1000);
						}
						this.hzlOptions = result.hzlOptions;
						this.Prokind = result.Prokind;
					}
				});
			},
			loadAutocompleteData(value,fld) {
				var params = {};
				params['method'] = 'uni.autocomplete.get.data.list';
				params['dataKey'] = fld.dataKey||'';
				params['key'] = value||'';
				formatData.set(params);
				// let url = 'https://www.fastmock.site/mock/5ac037a8ecc6af666419e1e746d2172f/uniapp/getClientList';
				var curTaskey = this.autocompleteRequestTask >= 0 ? this.autocompleteRequestTask+1 : 0;
			
				return uni.request({
					url: formatData.httpUrl(), //仅为示例，并非真实接口地址。
					data:params,
				})
				.then(ret => {
					// console.log('curTaskey',curTaskey);
					// console.log('autocompleteRequestTask',this.autocompleteRequestTask);
					if(this.autocompleteRequestTask >= curTaskey){
						// return false;
					}
					this.autocompleteRequestTask = curTaskey;
		
					var [error, res] = ret;
					let data = res.data.data || [];
					
					if (data.length <= 0) {
						return Promise.resolve([]);
					}
		
					let retData = data || [];
					return Promise.resolve(retData);
				});
			},
		},
		onLoad(query) {
			let self = this;
			self.pageType = query.type;
			self.formData.rukuDate = formatData.dateToday();
			self.getData();
		},
	}
</script>

<style>
	/* .uni-form-button{display: flex;flex-direction: row;justify-content:space-between;}
	.uni- */form-button button{width: 350upx;}
	.pull-screen{width: 100%;height: 100%;position: fixed;top: 0;left: 0;}
	.pull-screen .gif-white{margin-top: 45%;}
</style>